import React, { useEffect } from 'react';

export default () => {
  useEffect(() => {
    var doc = document;
    var _wheelData = -1; // todo 记录拖拽元素移动的距离（既div模拟的滚动条已经的距离）
    var mainBox = doc.getElementById('mainBox');
    function bind(obj, type, handler) {
      var node = typeof obj == 'string' ? $(obj) : obj;
      if (node.addEventListener) {
        node.addEventListener(type, handler, false);
      } else if (node.attachEvent) {
        node.attachEvent('on' + type, handler);
      } else {
        node['on' + type] = handler;
      }
    }
    function mouseWheel(obj, handler) {
      var node = typeof obj == 'string' ? $(obj) : obj;
      bind(node, 'mousewheel', function(event) {
        var data = -getWheelData(event);
        handler(data);
        if (document.all) {
          window.event.returnValue = false;
        } else {
          event.preventDefault();
        }
      });
      //火狐
      bind(node, 'DOMMouseScroll', function(event) {
        var data = getWheelData(event);
        handler(data);
        event.preventDefault();
      });
      function getWheelData(event) {
        var e = event || window.event;
        return e.wheelDelta ? e.wheelDelta : e.detail * 40;
      }
    }
    function addScroll() {
      this.init.apply(this, arguments);
    }
    addScroll.prototype = {
      init: function(mainBox, contentBox, className) {
        debugger;
        var mainBox = doc.getElementById(mainBox);
        var contentBox = doc.getElementById(contentBox);
        var scrollDiv = this._createScroll(mainBox, className);
        this._resizeScorll(scrollDiv, mainBox, contentBox);
        this._tragScroll(scrollDiv, mainBox, contentBox);
        this._wheelChange(scrollDiv, mainBox, contentBox);
        this._clickScroll(scrollDiv, mainBox, contentBox);
      },
      //创建滚动条
      _createScroll: function(mainBox, className) {
        var _scrollBox = doc.createElement('div');
        var _scroll = doc.createElement('div');
        var span = doc.createElement('span');
        _scrollBox.appendChild(_scroll);
        _scroll.appendChild(span);
        _scroll.className = className;
        mainBox.appendChild(_scrollBox);
        return _scroll;
      },
      //调整滚动条
      _resizeScorll: function(element, mainBox, contentBox) {
        var p = element.parentNode;
        var conHeight = contentBox.offsetHeight;
        var _width = mainBox.clientWidth;
        var _height = mainBox.clientHeight;
        var _scrollWidth = element.offsetWidth;
        var _left = _width - _scrollWidth;
        p.style.width = _scrollWidth + 'px';
        p.style.height = _height + 'px';
        p.style.left = _left + 'px';
        p.style.position = 'absolute';
        p.style.background = '#ccc';
        contentBox.style.width = mainBox.offsetWidth - _scrollWidth + 'px';
        var _scrollHeight = parseInt(_height * (_height / conHeight));
        if (_scrollHeight >= mainBox.clientHeight) {
          element.parentNode.style.display = 'none';
        }
        element.style.height = _scrollHeight + 'px';
      },
      //拖动滚动条
      _tragScroll: function(element, mainBox, contentBox) {
        var mainHeight = mainBox.clientHeight;
        element.onmousedown = function(event) {
          var _this = this;
          // todo 记录拖拽元素位置
          var _scrollTop = element.offsetTop;
          var e = event || window.event;
          // todo 记录鼠标位置
          var top = e.clientY;
          //this.onmousemove=scrollGo;
          document.onmousemove = scrollGo;
          document.onmouseup = function(event) {
            this.onmousemove = null;
          };
          function scrollGo(event) {
            var e = event || window.event;
            var _top = e.clientY;
            // todo 元素要移动的距离
            var _t = _top - top + _scrollTop;
            // todo 下边界
            if (_t > mainHeight - element.offsetHeight) {
              _t = mainHeight - element.offsetHeight;
            }
            // todo 上边界
            if (_t <= 0) {
              _t = 0;
            }
            element.style.top = _t + 'px';
            contentBox.style.top =
              -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + 'px';
            _wheelData = _t;
            console.log(_wheelData);
          }
        };
        element.onmouseover = function() {
          this.style.background = '#444';
        };
        element.onmouseout = function() {
          this.style.background = '#666';
        };
      },
      //鼠标滚轮滚动，滚动条滚动
      _wheelChange: function(element, mainBox, contentBox) {
        var node = typeof mainBox == 'string' ? $(mainBox) : mainBox;
        var flag = 0,
          rate = 0,
          wheelFlag = 0;
        if (node) {
          mouseWheel(node, function(data) {
            wheelFlag += data;
            // todo 第一次触发是无效的，第二次触发，
            if (_wheelData >= 0) {
              flag = _wheelData;
              element.style.top = flag + 'px';
              wheelFlag = _wheelData * 12;
              _wheelData = -1;
            } else {
              flag = wheelFlag / 12;
            }
            if (flag <= 0) {
              flag = 0;
              wheelFlag = 0;
            }

            if (flag >= mainBox.offsetHeight - element.offsetHeight) {
              flag = mainBox.clientHeight - element.offsetHeight;
              wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
            }
            console.log(flag, mainBox.offsetHeight - element.offsetHeight);
            element.style.top = flag + 'px';
            contentBox.style.top =
              -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + 'px';
          });
        }
      },
      _clickScroll: function(element, mainBox, contentBox) {
        var p = element.parentNode;
        p.onclick = function(event) {
          var e = event || window.event;
          var t = e.target || e.srcElement;
          var sTop =
            document.documentElement.scrollTop > 0
              ? document.documentElement.scrollTop
              : document.body.scrollTop;
          var top = mainBox.offsetTop;
          var _top = e.clientY + sTop - top - element.offsetHeight / 2;
          if (_top <= 0) {
            _top = 0;
          }
          if (_top >= mainBox.clientHeight - element.offsetHeight) {
            _top = mainBox.clientHeight - element.offsetHeight;
          }
          if (t != element) {
            element.style.top = _top + 'px';
            contentBox.style.top =
              -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + 'px';
            _wheelData = _top;
          }
        };
      },
    };

    new addScroll('mainBox', 'content', 'scrollDiv');
  }, []);

  return (
    <div>
      <style>
        {`
          *{ margin:0; padding:0;}
#mainBox{
 width:400px;
 height:500px;
 border:1px #bbb solid;
 position:relative;
 overflow:hidden;
  margin:50px auto;
 }
#content{
 height:2500px;
 position:absolute;
 left:0;
 top:0;
}
.content-img{
width: 100%;
 background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485320653275&di=b7bc29cc2c7b3388d44958d8f97db0a3&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48094209_1449905365456_7.jpg)
}
.scrollDiv{
 width:18px;
 position:absolute;
 top:0;
 background:#666;
 border-radius:10px;
}
          `}
      </style>
      <div id="mainBox">
        <div id="content" className="content-img"></div>
      </div>
    </div>
  );
};
